<template>
  <!-- 数据列表 -->
  <div class="search-box">
      <div class="search2">
          <div class="left">
              <el-icon>
                  <Search />
              </el-icon>
              <span>数据列表</span>
          </div>
          <div class="right">
              <el-button v-permission="'addProductAttr'" @click="addProductAttr">添加</el-button>
          </div>
      </div>
  </div>
  <div>
      <el-table :data="list" border table-layout="auto" cell-class-name="align-c">
          <el-table-column prop="id" label="编号" width="100" />
          <el-table-column prop="name" label="类型名称" width="231" />

          <el-table-column prop="attributeCount" label="属性数量" width="200" />
          <el-table-column prop="paramCount" label="参数数量" width="200" />

          <el-table-column label="设置">
              <template #default="{ row }">
                  <el-button @click="toProductAttrList(row.id,row.name,0)" :disabled="route.query.parentId ? true : false">属性列表</el-button>
                  <el-button @click="toParameterList(row.id,row.name,1)">参数列表</el-button>
              </template>
          </el-table-column>
          <el-table-column label="操作">
              <template #default="{ row }">
                  <el-button @click="editProductAttr(row)" v-permission="'updateProductAttr'">编辑</el-button>
                  <el-button type="danger" @click="delProductAttr(row.id)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
  </div>
  <!-- 分页 -->
  <div class="page">
          <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :page-sizes="[5, 10, 15]"
              :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
              @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
  </div>

  <!-- 添加管理属性 -->
  <addproductAttr :show="addshow" :id="addId" :row="RowData" @Show="whatShow" />

</template>

<script setup lang='ts'>
import { Search } from "@element-plus/icons-vue";
import useTable from '@/hooks/useTable';
import { reactive, ref} from 'vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { addProductAttrApi, delAttributeApi} from './api';
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import addproductAttr from './addAttr.vue'

const router = useRouter()
const route = useRoute()
const urlId = ref<any>(route.query.parentId)

// 分页器数据
const background = ref(false)

// 传入数据
const form = ref({
  // 搜索框数据
  parentId: 0,
  pageSize: 5,
})
const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 5
})
let { list, total, pageNum,pageSize, pageChangeHandle, pageSizeChangeHandle, searchHandle } = useTable(addProductAttrApi,queryParams)


const addshow = ref<boolean>(false)
const addId = ref<number>(0)
let RowData = reactive({})

// 添加商品属性
const addProductAttr = () => {
  addshow.value = true
}

// 添加页选择后
const whatShow = (val: boolean,) => {
  addshow.value = false;
  addId.value = 0
  RowData = {
      attributeCount: 0,
      id: 0,
      name: '',
      paramCount: 0,
  }
  if (val) searchHandle();
}


// 编辑商品属性
const editProductAttr = (row: IProductAttrList) => {
  addshow.value = true;
  addId.value = row.id;
  RowData = row;
}
// 删除商品属性
const delProductAttr = (id: number) => {
  ElMessageBox.confirm('确定要删除该商品属性吗', '删除商品属性', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
  }).then(() => {
      delAttributeApi(id).then((res) => {
          ElMessage.success("删除成功")
          searchHandle()
      })
  }).catch(() => {
      ElMessage.error('取消删除')
  })
}
// 属性列表
const toProductAttrList =(parentId: number,cname:any,type:number)=>{
    router.push(`/pms/productAttrList?cid=${parentId}&cname=${cname}&type=${type}`)
}
// 参数列表
const toParameterList =(parentId: number,cname:any,type:number)=>{
    router.push(`/pms/productAttrList?cid=${parentId}&cname=${cname}&type=${type}`)
}


</script>
<style lang="less" scoped>
.search-box {
  box-shadow: 0 0 10px 0px #ccc;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;

  .search {
      padding: 20px 0px;
      display: flex;


      &:first-child {
          justify-content: space-between;
      }

      &:last-child {
          display: flex;
          flex-wrap: wrap;
          // width: 300px;
          margin-left: 40px;

          div {
              width: 250px;
              display: flex;

              span {
                  font-size: 14px;
                  width: 125px;
                  margin-right: 12px;
              }
          }

      }
  }

  .search2 {
      display: flex;
      width: 100%;
      justify-content: space-between;

      .left {

          span {
              line-height: 20px;
              font-size: 14px;
              align-items: center;
          }
      }


  }
}

:deep(.align-c),
:deep(.is-leaf) {
  .cell {
      text-align: center !important;
  }


}
.page {
  padding: 0.1rem;
  display: flex;
  justify-content: flex-end;
}
</style>